<template>
  <div>
    <h4>{{ nameplus }}的个人博客</h4>
    <ul>
      <li class="clickTest" v-on:click="showList">博客列表</li>
      <li><a v-bind:href="url">个人外联</a></li>
    </ul>
    <br />
    请输入当前姓名：<input v-model="name" />
    <blog-list v-if="showListFlag" />
  </div>
</template>

<script>
import BlogList from '../components/BlogList.vue'
export default {
  name: 'Home',
  components: { BlogList },
  data() {
    return {
      name: '李四',
      showListFlag: false,
      url: 'https://baidu.com.cn',
      
    }
  },
  computed:{
    nameplus(){
      return this.name+this.name;
    }
  },


  methods: {
    showList() {
      this.showListFlag = true
    },
  },
}
</script>
<style lang="scss">
ul {
  list-style: none;
  display: inline-block;
  li {
    float: left;
    margin: 0 20px;
  }
}
</style>
